<template>
	<view class="navigation">
		<image src="https://dongke-common.oss-cn-shenzhen.aliyuncs.com/garage-kit/pk-bg.png" mode="" />
		<view class="pk">对战</view>
	</view>

	<view class="list" style="padding-bottom: 180rpx;">
		<view class="item" v-for="item in pkList" :key="item.id" @click="gotoDetail(item.id)">
			<view class="img">
				<image :src="item.main_photo" />
				<view :class="item.join_state === '虚位以待' ? 'wait' : 'battle'">{{ item.join_state }}</view>
				<!-- <view v-if="item.join_state === '虚位以待'" class="wait">虚位以待</view> -->
				<view class="model">
					<view v-for="(stock, index) in item.stockList" :key="index">{{ stock }}</view>
				</view>
			</view>
			<view class="name">
				{{ item.name }}
			</view>
			<view class="quantity">
				<text class="number">{{ item.showStock }}</text>
				<text>￥{{ item.price }}</text>
			</view>
		</view>
	</view>
	<tarbar :active="1"></tarbar>
</template>

<script lang="ts">
	export default {
		name: 'PK'
	}
</script>

<script lang="ts" setup>
	import { list } from "@/api/pk";
	import { ref, reactive, defineProps } from 'vue'
	import { onShow,onPullDownRefresh } from "@dcloudio/uni-app";
	import tarbar from '@/wxcomponents/tarbar'
	let pkList = ref([])

	async function load() {
		let { code, data } = await list()
		let stockMap = data.stock_map
		// 商品价格从单位分转为元
		for (let i = 0; i < data.items.length; i++) {
			let stockList = []
			data.items[i].price = (data.items[i].price / 100)
			data.items[i].showStock = data.items[i].stock + "/" + data.items[i].total_number
			stockMap[data.items[i].id].forEach(element => {
				stockList.push(`${element.type}:${element.stock}`)
			});
			data.items[i].stockList = stockList
		}
		pkList.value = data.items
	}

	function gotoDetail(id) {
		uni.navigateTo({
			url: '/pages/pk/detail?id=' + id
		})
		// uni.navigateTo({
		// 	url: '/pages/index/touch?id=' + id
		// })
		
	}

	onShow(async () => {
		await load();
	});
	onPullDownRefresh(async () => {
		await load();
		uni.stopPullDownRefresh()
	});
</script>


<style lang="scss">
	@import 'src/static/scss/maincommon';
	.navigation {
		width: 100%;
		height: 300rpx;
		color: #FFF;
		line-height: 300rpx;
		position: relative;

		image {
			width: 100%;
			height: 300rpx;
			position: absolute;
			top: 0;
			left: 0;
		}

		.pk {
			padding-left: 40rpx;
		}
	}

	.list {
		display: flex;
		// justify-content: space-around;
		margin-top: -100rpx;
		flex-wrap: wrap;
		color: #FFF;

		.item {
			width: 30%;
			margin: 12rpx;

			.img {
				// width: 220rpx;
				height: 196rpx;
				padding: 20rpx;
				background-image: url("~@/static/pk-productbg.png");
				background-size: cover;
				background-repeat: no-repeat;
				position: relative;
				font-size: 16rpx;

				image {
					width: 190rpx;
					height: 190rpx;
				}

				.battle {
					padding: 5rpx 10rpx;
					position: absolute;
					top: 15rpx;
					right: 0;
					background: linear-gradient(90deg, #2F76EC 0%, #D85AE7 100%);
					font-size: 20rpx;
				}

				.wait {
					padding: 5rpx 10rpx;
					position: absolute;
					top: 15rpx;
					right: 0;
					background: linear-gradient(90deg, #D31539 0%, #E8549E 100%);
					font-size: 20rpx;
				}

				.model {
					padding: 15rpx;
					position: absolute;
					left: 22rpx;
					bottom: 30rpx;
					opacity: 0.5;
					border-radius: 4px;
					background: #000000;
					line-height: 30rpx;
				}
			}

			.name {
				margin-top: 5rpx;
				font-size: 20rpx;
			}

			.quantity {
				margin-top: 5rpx;
				font-size: 20rpx;
				display: flex;
				justify-content: space-between;

				.number {
					color: #B0B0B0;
				}
			}
		}
	}
</style>